function Page(el, option = {}) {
    this.el = document.querySelector(el)
    this.option = option
    this.init()
}
Page.prototype.init = function () {
    //动作
    //1.创建标签
    this.createTag()
    this.parentTag()
    this.elementTag()
    //2.添加盒子点击事件（事件委托）

}
//提供样式
Page.prototype.parentTag = function () {
    this.el.style.display = 'flex'
    this.el.style.justifyContent = 'center'
    this.el.style.alignItems = 'center'
}

//创建标签
Page.prototype.createTag = function () {
    this.el.innerText = ""
    for (let key in this.option.pageTag) {
        this.createP('p', this.option.pageTag[key], this.el)
    }
    //创建页码
    this.createNum()



}
//创建页码
Page.prototype.createNum = function () {
    //获取第三个分页标签
    let box = this.el.querySelector('p:nth-child(3)')
    box.style.border = 'none'
    box.style.margin = '0px'
    box.style.padding = '0px'
    // for(let i=1;i<6;i++){
    //     this.createP('p',i,box)   
    // }
    let pageNum = this.option.pageInfo.pageNum
    this.option.pageInfo.totalPage = Math.ceil(this.option.pageInfo.totalData / this.option.pageInfo.pageSize)
    let maxNum = this.option.pageInfo.totalPage
    if (maxNum < 7) {
        for (let i = 1; i <= maxNum; i++) {
            this.createP('p', i, box)
        }
    }


    else if (pageNum < 5) {
        for (let i = 1; i <= 5; i++) {
            this.createP('p', i, box)
        }
        this.createP('p', '...', box)
        this.createP('p', maxNum - 1, box)
        this.createP('p', maxNum, box)
    } else if (pageNum == 5) {
        for (let i = 1; i <= 7; i++) {
            this.createP('p', i, box)
        }
        this.createP('p', '...', box)
        this.createP('p', maxNum - 1, box)
        this.createP('p', maxNum, box)
    } else if (pageNum > 5 && pageNum < maxNum - 4) {
        for (let i = 1; i <= 2; i++) {
            this.createP('p', i, box)
        }
        this.createP('p', '...', box)
        this.createP('p', maxNum - 2, box)
        this.createP('p', maxNum - 1, box)
        this.createP('p', maxNum, box)
        this.createP('p', maxNum + 1, box)
        this.createP('p', maxNum + 2, box)
        this.createP('p', '...', box)
        this.createP('p', maxNum - 1, box)
        this.createP('p', maxNum, box)
    } else if (pageNum > maxNum - 4) {
        for (let i = 1; i <= 2; i++) {
            this.createP('p', i, box)
        }
        this.createP('p', '...', box)
        for (let i = maxNum - 4; i <= maxNum; i++) {
            this.createP('p', i, box)
        }
    }


}
Page.prototype.createP = function (tagName, content, fatherobj) {
    let pobj = document.createElement(tagName)
    pobj.innerText = content
    pobj.style.border = '1px solid black'
    pobj.style.margin = '0 5px'
    pobj.style.padding = '0 5px'
    pobj.style.display = 'inline-block'
    fatherobj.appendChild(pobj)
    if (content == this.option.pageInfo.pageNum) pobj.style.background = 'red'
}

Page.prototype.elementTag = function () {
    this.el.onclick = (e) => {
        let evt = e || window.event
        let target = evt.target || evt.srcElement
        if (target.nodeName === 'P') {
            switch (target.innerText) {
                case this.option.pageTag.first:
                    this.option.pageInfo.pageNum = 1
                    
                    break;
                //////
                case this.option.pageTag.prev:
                    if (this.option.pageInfo.pageNum == 1) return
                    this.option.pageInfo.pageNum = this.option.pageInfo.pageNum - 1
                    
                    console.log(this.option.pageInfo.pageNum);

                    break;
                case this.option.pageTag.next:
                    if (this.option.pageInfo.pageNum == this.option.pageInfo.totalPage) return
                    this.option.pageInfo.pageNum++
                    
                    break;
                case this.option.pageTag.last:
                    this.option.pageInfo.pageNum = this.option.pageInfo.totalPage
                    
                    break;
                default:
                    if (parseInt(target.innerHTML) > 0) {
                        this.option.pageInfo.pageNum = parseInt(target.innerHTML)
                    }
                    
                    break;
            }
            this.createTag()
        }
        // if (tager.nodeName == 'P') {
        //     switch (tager.innerText) {
        //         case this.options.pageTag.first:
        //             this.options.pageInfo.pageNum = 1
        //             this.creatEl()
        //             break;
        //         case this.options.pageTag.prev:
        //             //最少是第一页
        //             if (this.options.pageInfo.pageNum == 1) return
        //             this.options.pageInfo.pageNum--
        //             break;
        //         case this.options.pageTag.next:
        //             //最多是总页数
        //             if (this.options.pageInfo.pageNum == this.options.pageInfo.totalPage) return
        //             this.options.pageInfo.pageNum++
        //             break;
        //         case this.options.pageTag.last:
        //             this.options.pageInfo.pageNum = this.options.pageInfo.totalPage
        //             break;
        //         //用来判断是否是数字
        //         default:
        //             if (parseInt(tager.innerHTML) > 0) {
        //                 this.options.pageInfo.pageNum = parseInt(tager.innerHTML)
        //             }
        //             break;
        //     }
        // }
    }
}